<template>
  <div class="bg">
    <van-nav-bar title="个人中心" fixed />
    <!-- userinfo start -->
    <div class="user">
      <div class="row1">
        <span>
          <van-icon name="edit" />签到
        </span>
        <span>
          <van-icon name="qr" />会员码
        </span>
      </div>
      <div>
        <van-image
          @click="toUserInfo"
          round
          width="0.65rem"
          height="0.65rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          fit="cover"
        />
        <h2>{{username}}</h2>
      </div>
    </div>
    <!-- 余额等 start -->
    <UserMoney></UserMoney>
    <!-- banner start -->
    <div class="ye_wrap">
      <div class="ye_radius">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/yeeImg/banner1.png" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/yeeImg/banner1.png" alt />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- order start -->
    <UserOrder></UserOrder>
    <!-- car等 start -->
    <div class="ye_wrap">
      <div class="ye_radius">
        <van-cell title="购物车" icon="shopping-cart-o" is-link to="/redwine/cart" />
        <van-cell title="任务中心" icon="todo-list-o" is-link />
        <van-cell title="返现" icon="balance-o" is-link />
        <van-cell title="赠品" icon="gift-o" is-link />
      </div>
    </div>
    <!-- address start -->
    <div class="ye_wrap">
      <div class="ye_radius">
        <van-cell title="收货地址" icon="location-o" is-link to="/address" />
      </div>
    </div>
    <!-- userinfo start -->
    <div class="ye_wrap">
      <div class="ye_radius">
        <van-cell title="个人信息" icon="user-o" is-link to="/userInfo" />
        <van-cell title="账号设置" icon="setting-o" is-link to="/userSetting"/>
      </div>
    </div>
    <div class="copy">左岸酒窖</div>
  </div>
</template>

<script>
import Vue from "vue";
import UserMoney from "components/user/UserMoney";
import UserOrder from "components/user/UserOrder";
import { Image as VanImage } from "vant";
import { Swipe, SwipeItem } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
export default {
  data() {
    return {
      username: localStorage.getItem("username")
    };
  },
  components: {
    UserMoney,
    UserOrder
  },
  created() {},
  computed: {},
  methods: {
    toUserInfo() {
      this.$router.push("/userInfo");
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/yee.css';

.bg {
  background-color: #f8f8f8;
}

.user {
  margin-top 0.5rem
  height: 1.7rem;
  color: #fff;
  background-image: url('../../assets/yeeImg/userInfo.png');
  background-size: cover;

  .row1 {
    text-align: right;

    span {
      margin: 0.1rem;
      line-height: 0.45rem;
      font-size: 12px;

      .van-icon {
        vertical-align: -0.01rem;
        margin-right: 0.05rem;
      }
    }
  }

  .van-image {
    margin-top: 0.08rem;
    margin-left: 0.2rem;
  }

  h2 {
    display: inline-block;
    vertical-align: 0.36rem;
    margin-left: 0.15rem;
  }
}

.ye_radius img {
  background-color: black;
  height: 0.98rem;
  width: 100%;
}

.copy {
  margin-top: 0.4rem;
  padding-bottom: 0.4rem;
  text-align: center;
}
</style>
